@extends('home.layout.base')
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],
                    pageData: null,
                    hasData: true, //加载更多开关
                    noData: false, //没有数据开关
                    loading: false,//加载loading开关
                    params:{page : 1},
                }
            },
            created(){
                this.list();
            },
            methods: {
                list() {
                    let that = this;
                    this.hasData = false;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('home.live.index') }}",this.params,function(res){
                            that.pageData = res.data;
                            if(that.params.page == 1){
                                that.listData = res.data.data;
                            }else{
                                that.listData = that.listData.concat(res.data.data);
                            }
                            that.loading = false;
                            if(that.params.page == that.pageData.last_page){
                                that.noData = true;
                                that.hasData = false;
                            }else{
                                that.noData = false;
                                that.hasData = true;
                            }
                            that.params.page ++;
                        })
                    },300);
                },
                paginate(){
                    this.hasData = false;
                    this.list();
                }
            }
        });
        let author = new Vue({
            el: '#author',
            data: function() {
                return {
                    listAuthors: {!! $authors !!},
                }
            },
            mounted(){

            },
            methods: {
                new_info(id){
                    window.location.href = "{{ route('home.new.info') }}"+'?id='+id;
                },
                refresh() {
                    let that = this;
                    $.get("{{ route('home.index.refresh') }}",this.params,function(res){
                        that.listAuthors = res.data;
                    })
                },
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main">
        <div class="row">
            <div class="col-lg-8 main-left">
                <div class="col-lg-12 main-kuaixun" id="app" v-cloak>
                    <h4>7*24h 快讯<span></span></h4>
                    <ul v-for="item in listData">
                        <li>
                            <div class="main-kuaixun-date">
                                <div class="date-info1">
                                    <span class="date-month">@{{ moment(item.created_at).format('MM') }}月</span>
                                    <span class="date-day">@{{ moment(item.created_at).format('DD') }}日</span>
                                </div>
                                <div class="date-info2">
                                    <span class="date-week">@{{ item.week }}</span>
                                </div>
                            </div>
                        </li>
                        <li v-for="child in item.child" class="kuaixun-xian">
                            <div class="main-kuaixun-cont">
                                <div class="cont-info1">
                                    <i class="fa fa-circle-o"><span>@{{ moment(child.created_at).format('HH:mm') }}</span></i>
                                </div>
                                <div class="cont-info2">
                                    <p class="main-kuaixun-cont">@{{ child.content }}</p>
                                    <p class="main-kuaixun-laiyuan">来源：@{{ child.source }}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="col-lg-12 text-center" v-show="hasData">
                        <button class="item-article-more" @click="paginate">加载更多 >> </button>
                    </div>
                    <div class="col-lg-12 text-center" v-show="loading"><i class="fa fa-spinner fa-pulse"></i></div>
                    <div class="col-lg-12 text-center" v-show="noData" style="padding: 25px 0"><span>没有更多了</span></div>
                </div>
            </div>
            <div class="col-lg-4 main-right">
                <div class="col-lg-12 right-zhuanlan" id="author" v-cloak>
                    <h4>专栏作者 <a class="more" href="{{ route('home.column.index') }}">更多 >></a></h4>
                    <div class="zhuanlan-item" v-for="a in listAuthors">
                        <div class="zhuanlan-item-head">
                            <a class="zhuanlan-item-head-avatar" href="">
                                <img :src="a.avatar" alt="">
                            </a>
                            <div class="zhuanlan-item-head-info">
                                <p>@{{ a.truename }}</p>
                                <p>文章数：<span>@{{ a.total_news }}</span> &nbsp;&nbsp;浏览量：<span>@{{ a.total_views }}</span></p>
                            </div>
                        </div>
                        <div class="zhuanlan-item-list">
                            <p v-for="c in a.article" @click="new_info(c.id)"><i class="fa fa-circle"></i>@{{ c.title }}</p>
                        </div>
                    </div>
                    <div class="zhuanlan-refresh">
                        <button @click="refresh()"><i class="fa fa-refresh"></i> &nbsp;换一换</button>
                    </div>
                </div>

                <div class="col-lg-12 right-hot">
                    <h4>热门新闻</h4>
                    <div class="hot-head">
                        <a href="{{ route('home.new.info',['id'=>$news_hot[0]['id']]) }}"><img src="{{ $news_hot[0]['thumb'] }}" alt="">
                            <p>{{ $news_hot[0]['title'] }}</p></a>
                    </div>
                    @foreach($news_hot as $key=>$hot)
                        @if($key>0)
                            <div class="hot-item">
                                <a href="{{ route('home.new.info',['id'=>$hot['id']]) }}"><img src="{{ $hot['thumb'] }}" alt=""></a>
                                <div class="hot-item-info">
                                    <p><a href="{{ route('home.new.info',['id'=>$hot['id']]) }}">{{ $hot['title'] }}</a></p>
                                    <p>{{ $hot['created_at']->format('Y-m-d') }}</p>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

